<template>
	<view class="content">
		<!-- chenchuang-tabs组件，根据文字自适应tab项宽度，支持自定义标题栏 -->
		<view style="margin-top:14px; margin-left: 8px; margin-right: 10px;">
			<!-- spaceLeft设置tabs间距 v-model：绑定选择序列 tabs: 选择数据 change：切换事件  -->
			<chenchuang-tabs spaceLeft="12" v-model="industryTabIndex" :tabs="industryTabs"
				@change="tabChange"></chenchuang-tabs>
			<!-- 列表组件 -->
			<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>
		</view>
	</view>
</template>

<script>
	import CCBProjectList from '@/components/CCBProjectList/CCProjectList.vue';

	export default {
		components: {CCBProjectList},
		data() {
			return {
				// 列表数组
				projectList: [],
				industryTabs: [],
				industryTabIndex: 0,

			}
		},
		onLoad() {
			this.getVisTypeEnterCount()
		},
		methods: {
			getVisTypeEnterCount() {
				this.$u.get('/visitlogextend/vistypeentercount').then(res => {
					if(res.code==200){
						this.industryTabs = res.result
						this.tabChange()
					}else{
						this.$u.toast('获取车辆数失败',res.message)
					}	
				}).catch(err => {
					this.$u.toast('获取车辆数异常',err)
				})
			},
			tabChange() {
				this.projectList = []
				const tab = this.industryTabs[this.industryTabIndex]
				for (let i = 0; i < tab.maxStopCount; i++) {
					if(tab.carNos[i]) {
						this.projectList.push({
							'proName': '车位' + i,
							'proUnit': tab.carNos[i].vcompany,
							'area': tab.carNos[i].carNo,
							'proType': tab.carNos[i].vphone,
							'stage': '已占位',
							'id': i + ''
						});
					}else{
						this.projectList.push({
							'proName': '车位' + i,
							'stage': '空车位',
							'id': i + ''
						});
					}
				}
			}
		}
	}
</script>

<style>
	page {

		background-color: #f6f6f6;
	}

	.content {
		display: flex;
		flex-direction: column;


	}
</style>